<template>
	<div class="content">
		
			
			<div class="three_login">
				<image class="three_login_wx" src="/static/imgs/pinchaologo.png"  resize="cover" ></image>
			</div>
			<div class="three_login_wxbox" @click="login">
				<text class="three_login_wx">微信登录</text>
			</div>
			<text class="little">获取你的公开信息（昵称，头像等）</text>
		
	</div>
</template>

<script>
	import md5 from 'js-md5';
	
	export default {
		data() {
			return {
				userInfo:{},
				user:{
					
					phone:"",
					code:""
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			login(){
				let _this = this;
				
				uni.login({
							  provider: 'weixin',
							  success: function (loginRes) {
								  uni.showLoading({
								 	title:"加载中。。。"
								 })
								// 获取用户信息
								uni.getUserInfo({
								  provider: 'weixin',
								  success: function (infoRes) {
									   _this.userInfo =JSON.parse( infoRes.rawData);
									   console.log(JSON.stringify(_this.$system.model) );
									uni.request({
										url: 'http://apptest.pinchao.cc/api.php/User/login', //登录
										method:"post",
										dataType:"json",
										data: {
											nickname:  _this.userInfo.nickName,
											sex: _this.userInfo.gender,
											province: _this.userInfo.province,
											city: _this.userInfo.city,
											country: _this.userInfo.country,
											headimgurl: _this.userInfo.avatarUrl,
											unionid: _this.userInfo.unionId,
											code:md5('shede'+ _this.userInfo.unionId)
										},
										header: {
											'system_version': _this.$system.model,
											'app_version': '1.0.0',
											"Content-Type":"application/x-www-form-urlencoded"
										},
										success: (resa) => {
											uni.hideLoading();
											console.log(resa.data.data.uid );
											_this.userInfo.access_token = JSON.stringify(resa.data.data.access_token);
											_this.userInfo.uid = JSON.stringify(resa.data.data.uid);
											_this.userInfo.phone = _this.phone;
											if(JSON.stringify(resa.data.data.status) == 0){
												
												_this.userInfo.ispass = true;
												
												uni.setStorage({
													key: 'storage_key',
													data: _this.userInfo,
												})
												uni.showToast({
													title: resa.data.data.msg,
													icon: 'none'
												});
											}else if(resa.data.data.status == 2){
												
												_this.userInfo.ispass = false;
												uni.setStorage({
													key: 'storage_key',
													data: _this.userInfo,
												})
												uni.setStorage({
													key: 'userInfo',
													data:JSON.stringify( _this.userInfo ),
												})
												uni.navigateTo({
													url: '/pages/public/bindPhone/bindPhone',
												});
											}else if(resa.data.data.status == 1){
												
												_this.userInfo.ispass = false;
												console.log(JSON.stringify(_this.userInfo));
												uni.setStorage({
													key: 'storage_key',
													data: _this.userInfo,
												})
												uni.setStorage({
													key: 'userInfo',
													data:JSON.stringify( _this.userInfo ),
												})
												uni.switchTab({
													url: '/pages/home/home',
												});
											}
										}
									});
								  }
								});
							  }
							});
			}
		}
	}
</script>


<style>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.three_login_wxbox{
		margin-top: 40upx;
		width: 640upx;
		height: 98upx;
		line-height: 98upx;
		border-radius:8upx ;
		background-color: green ;
		margin-bottom: 40upx;
		text-align: center;
	}
	.three_login_wx{
		text-align: center;
		color: #fff;
		font-size: 36upx;
		font-weight: bold;
	}
	.little{
		color: #8F8F94;
	}
.wx_line{
	border-top-style: solid;
	border-top-width: 2upx;
	border-top-color: #DBDBDB;
	width: 670upx;
	height: 10upx;
	left: 0upx;
	z-index: -1;
	position: absolute;
	top: 12upx;
}
.three_login_wx{
	width: 580upx;
	height: 260upx;
	margin: 30upx auto;
}
.three_login_txt{
	margin-top: 4upx;
	font-size: 28upx;
	padding: 4upx 10upx;
	background-color: #fff;
	color: #6A6A6A;
}
.three_login{
	
	width: 580upx;
	height: 260upx;
	align-items: center;
	justify-content: center;
}
.head_img{
	margin-top: 100upx;
	width: 750upx;
	height: 200upx;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.head_img_div{
	width: 200upx;
	height: 200upx;
	border-radius: 200upx;
	margin: 0 auto;
}
.head_img_img{
	width: 200upx;
	height: 200upx;
	border-radius: 200upx;
}
.user_{
	width: 670upx;
	height: 76upx ;
	margin-top: 60upx;
	margin-left: 40upx;
	border-bottom-style :solid;
	border-bottom-width:2upx;
	border-bottom-color: #CECECE;
	display: flex;
	flex-direction: row;
}
.user_phone_icon{
	margin-top: 10upx;
	width: 40upx;
	height: 40upx;
}
.user_code_icon{
	margin-top: 10upx;
	width: 40upx;
	height: 40upx;
}
.user_phone{
	margin-top: 120upx;
}
.user_phone_input{
	width: 400upx;
	height: 50upx;
	margin-left: 20upx;
	vertical-align: top;
}
.user_code_input{
	width: 400upx;
	height: 50upx;
	margin-left: 20upx;
	vertical-align: top;
}

.user_send_btn{
	width: 200upx;
	height: 50upx;
	border-radius: 10upx;
	background-color: #DCC500;
	text-align: center;
	line-height: 50upx;
	color: #fff;
	font-size: 28upx;
}
.login_d{
	width: 670upx;
	margin-left: 40upx;
	height: 80upx;
	border-radius: 10upx;
	background-color: #DCC500;
	margin-top: 80upx;
}
.login_t{
	color: #FFFFFF;
	font-size: 34upx;
	text-align: center;
	line-height: 80upx;
}
</style>